<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>创意卡片生成器</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
    <div class="input-area">
        <textarea id="textInput" placeholder="输入你的灵感文字..."></textarea>
        <button onclick="generateCards()">生成卡片</button>
    </div>

    <div class="gallery-container">
        <!-- 极简主义 -->
        <div class="card-style minimal">
            <canvas class="preview-canvas"></canvas>
            <button class="export-btn" onclick="exportCard(this)">导出</button>
            <div class="style-description">
                <h3>极简主义</h3>
                <p>无衬线字体 | 1.5倍行距 | 留白艺术</p>
            </div>
        </div>

        <!-- 复古手账 -->
        <div class="card-style vintage">
            <canvas class="preview-canvas"></canvas>
            <button class="export-btn" onclick="exportCard(this)">导出</button>
            <div class="style-description">
                <h3>复古手账</h3>
                <p>手写字体 | 随机行距 | 做旧纸张</p>
            </div>
        </div>

        <!-- 赛博朋克 -->
        <div class="card-style cyberpunk">
            <canvas class="preview-canvas"></canvas>
            <button class="export-btn" onclick="exportCard(this)">导出</button>
            <div class="style-description">
                <h3>赛博朋克</h3>
                <p>科技字体 | 紧凑排版 | 霓虹渐变</p>
            </div>
        </div>

        <!-- 诗意田园 -->
        <div class="card-style pastoral">
            <canvas class="preview-canvas"></canvas>
            <button class="export-btn" onclick="exportCard(this)">导出</button>
            <div class="style-description">
                <h3>诗意田园</h3>
                <p>书法字体 | 宽松行距 | 自然肌理</p>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>